<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>07_事件委派-特殊情况-标签结构混乱</title>
    </head>
    <body>
        <ul>
            <li>王昭君</li>
            <li>西施</li>
            <li>貂蝉</li>
            <li>杨玉环</li>
            <li>
                <span>
                    张林杨
                </span>
            </li>
        </ul>

        <script>
            var ul = document.querySelector('ul');

            ul.onmouseover = function(event){
                if(event.target.nodeName == 'LI') {
                    event.target.style.backgroundColor = 'tomato';
                }else if(event.target.parentElement.nodeName == 'LI'){
                    event.target.parentElement.style.backgroundColor = 'tomato';
                }

            }

            ul.onmouseout = function(event){
                if(event.target.nodeName == 'LI') {
                    event.target.style.backgroundColor = '';
                }else if(event.target.parentElement.nodeName == 'LI'){
                    event.target.parentElement.style.backgroundColor = '';
                }

            }


        </script>
    </body>
</html>